<template>
  <div>
    <h1 align="center">登陆界面</h1>
    <hr />
    <div id="left">
      <img src="../../爱家商城/images/logoinimg.jpg" width="716" height="376">
    </div>

    <div id="right">
      <h3>会员登陆</h3><br />
      <table>
        <tr>
          <td colspan="2" style="font-size: 20px;">用户名</td>
        </tr>
        <tr>
          <td colspan="2"><input type="text" style="width: 300px;height: 30px;" v-model="user.username" /></td>
        </tr>
        <tr>
          <td colspan="2" style="font-size: 20px;">密码</td>
        </tr>
        <tr>
          <td colspan="2" @keyup.enter="login"><input type="password" style="width: 300px;height: 30px;" v-model="user.password" /></td>
        </tr>
        <tr>
          <td colspan="2"><input type="checkbox" />下次自动登录</td>
        </tr>
        <tr>
          <td><button style="width: 80px;" @click="login">登陆</button></td>
          <!-- <td><button style="width: 80px;" @click="show=!show">注册</button></td> -->
          <td><button style="width: 80px;" @click="drawer=true">注册</button></td>
        </tr>
      </table>
    </div>

    <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
      <div>
        <h2 align="center" style="padding-top: 50px;">会员注册</h2><br />
        <div id="zcbl">
          <table>
            <tr>
              <td>用户名:</td>
              <td colspan="2"><input type="text" v-model="user.username"></td>
            </tr>
            <tr>
              <td>密码:</td>
              <td colspan="2"><input type="password" v-model="user.password"></td>
            </tr>
            <tr>
              <td>确认密码:</td>
              <td colspan="2"><input type="password" v-model="user.eqpassword"></td>
            </tr>
            <tr>
              <td>手机号:</td>
              <td colspan="2"><input type="text" v-model="user.phone"></td>
            </tr>
            <tr>
              <td>邮箱地址:</td>
              <td colspan="2"><input type="text" v-model="user.email"></td>
            </tr>
            <tr>
              <td colspan="2" align="center"><button style="width: 80px;" @click="reg">注册</button>
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                <button style="width: 80px;" @click="drawer=false">取消</button>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </el-drawer>


    <router-view></router-view>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        drawer: false,
        show: false,
        user: {
          username: "",
          password: "",
          eqpassword: "",
          phone: "",
          email: ""
        }
      }
    },
    methods: {
      zzc() {
        this.show = !this.show
        this.user = {}
      },
      mao() {
        event.stopPropagation();
      },
      async reg() {
        if (this.user.username === "" || this.user.password === "" || this.user.phone === "" || this.user.email ===
          "") {
          alert("必须填写完整信息")
        } else if (this.user.password !== this.user.eqpassword) {
          alert("密码不一致")
        } else {
          let {
            data: rep
          } = await this.$http.post("aj-user/reg", this.user);
          this.zzc()
          this.user = {}
          alert(rep)
        }
      },
      async login() {
        var uc=new URLSearchParams()
        uc.append("user",this.user)
        let {
          data: rsp
        } = await this.$http.post("aj-user/login", this.user)
        if (rsp === "") return alert('用户登录失败')
        alert('用户登陆成功')
        window.sessionStorage.setItem("rsp",JSON.stringify(rsp))
        if(rsp.username==="admin") return this.$router.push("/admin")
        this.$router.push('/home')
      }
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  div {
    display: block;
  }

  #left {
    float: left;
    width: 726px;
    padding-left: 240px;
  }

  #right {
    float: left;
    padding-left: 15px;
    width: 300px;
  }

  #zcbl {
    padding-top: 10%;
    padding-left: 50px;
    font-size: 30px;
  }

  #zcbl input {
    width: 300px;
    height: 30px;
  }

  #zcbl input:hover {
    background-color: #000000;
    color: white;
  }
</style>
